<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(card, index) in cards" :key="index">
        <el-card class="stat-card" :class="card.type">
          <div class="card-content">
            <img :src="card.icon" class="card-icon" />
            <div class="card-info">
              <div class="card-value">{{ card.value }}</div>
              <div class="card-label">{{ card.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="title">布布熊的心情曲线</span>
              <img src="https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif" class="header-icon" />
            </div>
          </template>
          <div class="mood-timeline">
            <div v-for="(mood, index) in moods" :key="index" class="mood-item">
              <div class="mood-icon-container" :class="mood.type">
                <img :src="mood.icon" class="mood-icon" />
              </div>
              <div class="mood-content">
                <div class="mood-time">{{ mood.time }}</div>
                <div class="mood-text">{{ mood.text }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="todo-card">
          <template #header>
            <div class="card-header">
              <span class="title">布布熊的待办事项</span>
              <img src="https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif" class="header-icon" />
            </div>
          </template>
          <div class="todo-list">
            <div v-for="(todo, index) in todos" :key="index" class="todo-item">
              <el-checkbox v-model="todo.done" :label="todo.text" class="todo-checkbox" />
              <div class="todo-time">{{ todo.time }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const cards = ref([
  {
    label: '今日心情',
    value: '开心',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'happy'
  },
  {
    label: '吃掉的竹子',
    value: '23根',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'bamboo'
  },
  {
    label: '睡觉时长',
    value: '8小时',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'sleep'
  },
  {
    label: '玩耍次数',
    value: '12次',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'play'
  }
])

const moods = ref([
  {
    time: '09:00',
    text: '早起吃了一根新鲜的竹子，心情超棒！',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'happy'
  },
  {
    time: '11:30',
    text: '和小伙伴们一起玩耍，好开心~',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'play'
  },
  {
    time: '14:00',
    text: '午睡时间到啦，好困困...',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'sleep'
  },
  {
    time: '16:30',
    text: '下午茶时间，最爱吃竹笋了！',
    icon: 'https://c-ssl.duitang.com/uploads/blog/202109/21/20210921225847_5a069.gif',
    type: 'eat'
  }
])

const todos = ref([
  {
    text: '吃早餐竹子',
    time: '09:00',
    done: true
  },
  {
    text: '晨练运动',
    time: '10:00',
    done: true
  },
  {
    text: '和朋友玩耍',
    time: '14:00',
    done: false
  },
  {
    text: '午睡时间',
    time: '15:00',
    done: false
  },
  {
    text: '吃晚餐竹子',
    time: '18:00',
    done: false
  }
])
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  border-radius: var(--border-radius);
  border: none;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.card-info {
  flex: 1;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 4px;
}

.card-label {
  font-size: 14px;
  color: #999;
}

.happy {
  background: linear-gradient(135deg, #FFE4E4, #FFF4E4);
}

.bamboo {
  background: linear-gradient(135deg, #E4FFE4, #E4FFF4);
}

.sleep {
  background: linear-gradient(135deg, #E4E4FF, #F4E4FF);
}

.play {
  background: linear-gradient(135deg, #FFE4F4, #FFE4E4);
}

.chart-card, .todo-card {
  border-radius: var(--border-radius);
  border: none;
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
}

.mood-timeline {
  padding: 20px 0;
}

.mood-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.mood-icon-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.mood-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mood-content {
  flex: 1;
}

.mood-time {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.mood-text {
  font-size: 14px;
  color: var(--text-color);
  line-height: 1.5;
}

.todo-list {
  padding: 20px 0;
}

.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.todo-checkbox {
  font-size: 14px;
  color: var(--text-color);
}

.todo-time {
  font-size: 12px;
  color: #999;
}

:deep(.el-checkbox__label) {
  color: var(--text-color);
}

:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: var(--primary-color);
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}
</style> 